<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>最家</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/myorder.css"/>
    <script src="X-admin/js/jquery.js"></script>
    <script src="js/public.js"></script>
    <link rel="stylesheet" href="X-admin/css/xadmin.css">
    <script src="X-admin/lib/layui/layui.js"></script>
    <script src="X-admin/js/xadmin.js"></script>
</head>
<body>
<!------------------------------head------------------------------>
<div class="head" id="top">
</div>
<script src="js/common.js"></script>
<!------------------------------idea------------------------------>
<div class="address mt">
    <div class="wrapper clearfix">
        <a href="#" class="fl">首页</a>
        <span>/</span>
        <a href="mygxin.html">个人中心</a>
        <span>/</span>
        <a href="myorderq.html" class="on">我的订单</a>
    </div>
</div>

<!------------------------------Bott------------------------------>
<div class="Bott">
    <div class="wrapper clearfix">
        <div class="zuo fl">
            <h4>
                <a href="#"><img id="person-img" style="border-radius: 60%;height: 100px;width: 100px"/></a>
                <p class="clearfix"><span id="username">[羊羊羊]</span><span class="fr">您好！</span></p>
            </h4>
            <div>
                <h4>我的订单</h4>
                <ul>
                    <li><a href="myorderq.html">订单中心</a></li>
                </ul>
                <h4>个人中心</h4>
                <ul>
                    <li><a href="mygxin.html">我的评价</a></li>
                    <li><a href="collection.html">我的收藏</a></li>
                    <li><a href="message.html">系统消息</a></li>
                </ul>
                <h4>账户管理</h4>
                <ul>
                    <li><a href="mygrxx.html">个人信息</a></li>
                    <li><a href="remima.html">修改密码</a></li>
                </ul>
            </div>
        </div>
        <div class="you fl">
            <div class="my clearfix">
                <h2 class="fl">我的订单</h2>
                <a href="#" class="fl">请谨防钓鱼链接或诈骗电话，了解更多&gt;</a>
            </div>
            <div class="dlist clearfix">
                <ul class="fl clearfix" id="wa">
                    <li><a href="myorderq1.html">待支付</a></li>
                    <li class="on"><a href="myorderq2.html">使用中</a></li>
                    <li><a href="myorderq.html">已完成</a></li>
                    <li><a href="myorderq3.html">已失效</a></li>
                </ul>
                <!--						<form action="#" method="get" class="fr clearfix">-->
                <!--							<input type="text" name="" id="" value="" placeholder="请输入商品名称、订单号" />-->
                <!--							<input type="button" name="" id="" value="" />-->
                <!--						</form>-->
            </div>

            <div id="orderList">

            </div>
        </div>
    </div>
</div>
<!--返回顶部-->
<div class="gotop">
    <a href="cart.html">
        <dl>
            <dt><img src="img/gt1.png"/></dt>
            <dd>去购<br/>物车</dd>
        </dl>
    </a>
    <a href="#" class="dh">
        <dl>
            <dt><img src="img/gt2.png"/></dt>
            <dd>联系<br/>客服</dd>
        </dl>
    </a>
    <a href="mygxin.html">
        <dl>
            <dt><img src="img/gt3.png"/></dt>
            <dd>个人<br/>中心</dd>
        </dl>
    </a>
    <a href="#" class="toptop" style="display: none">
        <dl>
            <dt><img src="img/gt4.png"/></dt>
            <dd>返回<br/>顶部</dd>
        </dl>
    </a>
    <p>400-800-8200</p>
</div>
<!--footer-->
<div class="footer">
    <div class="top">
        <div class="wrapper">
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot1.png"/></a>
                <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot2.png"/></a>
                <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot3.png"/></a>
                <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="img/foot4.png"/></a>
                <span class="fl">手机特色服务</span>
            </div>
        </div>
    </div>
    <p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
        违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/user.js" type="text/javascript" charset="utf-8"></script>
</body>
<script>
    var Address_Prefix = "http://localhost:9200/api-person";
    find();

    function find() {
        $.ajax({
            url: Address_Prefix + '/order/findUsingOrder',
            data: {userid: sessionStorage.getItem("userid"), pagees: 1, limits: 10},
            dataType: 'json',
            type: 'post',
            success: function (data) {
                let total = data.data.length;
                data = data.data;
                let obj = $("#orderList");
                let innerHtml = "";
                console.log(data);
                let img;
                for (let i = 0; i < total; i++) {
                    sessionStorage.setItem("orcode", data[i].orcode);
                    sessionStorage.setItem("reduce", data[i].reduce);
                    let crdate = data[i].update;
                    let letime = data[i].letime * 3600 * 1000;
                    innerHtml += "<div class=\"dkuang\">\n" +
                        "\t\t\t\t\t\t<p class=\"one\">" + data[i].stname + "</p>\n" +
                        "\t\t\t\t\t\t<div class=\"word clearfix\">\n" +
                        "\t\t\t\t\t\t\t<ul class=\"fl clearfix\">\n" +
                        "\t\t\t\t\t\t\t\t<li>" + data[i].crdate + "</li>\n" +
                        "\t\t\t\t\t\t\t\t<li>订单号:" + data[i].orcode + "</li>\n" +
                        "\t\t\t\t\t\t\t\t<li>在线支付</li>\n" +
                        "\t\t\t\t\t\t\t</ul>\n" +
                        "\t\t\t\t\t\t\t<p class=\"fr\">订单金额：<span>" + data[i].prices + "</span>元</p>\n" +
                        "\t\t\t\t\t\t</div>\n" +
                        "\t\t\t\t\t\t<div class=\"shohou clearfix\">\n" +
                        "\t\t\t\t\t\t\t<a href=\"#\" class=\"fl\"><img src=\"" + data[i].topimg + "\"/></a>\n" +
                        "\t\t\t\t\t\t\t<p class=\"fl\"><a href=\"#\"></a><a href=\"#\">¥" + data[i].unitpr + "*" + data[i].letime + "*" + data[i].reduce + "</a></p>\n" +
                        "\t\t\t\t\t\t\t<p class=\"fr\">\n" +
                        "\t\t\t\t\t\t\t\t<a  style='width: 200px' id='" + i + "'>使用时长:" + data[i].letime + "小时" + "</a>\n" +
                        "\t\t\t\t\t\t\t\t<a  style='color: red;width: 200px' id='time" + i + "'></a>\n" +
                        "\t\t\t\t\t\t\t\t<a onclick='leaseRenewal(" + data[i].letime + "," + data[i].reduce + "," + data[i].unitpr + "," + "&quot;" + data[i].orcode + "&quot;" + ")' style='width: 200px'>订单续租</a>\n" +
                        "\t\t\t\t\t\t\t</p>\n" +
                        "\t\t\t\t\t\t</div>\n" +
                        "\t\t\t\t\t</div>"
                    timer(i, crdate, letime);
                }
                obj.html(innerHtml);
            }
        })
        return false;
    }

    //订单续租方法
    function leaseRenewal(letime, reduce, unitpr, orcode) {
        xadmin.open('订单续租', 'order-leaseRenewal.html', 400, 500);
        sessionStorage.setItem("letime", letime);
        sessionStorage.setItem("reduce", reduce);
        sessionStorage.setItem("unitpr", unitpr);
        sessionStorage.setItem("orcode", orcode);


    }

    //倒计时
    function timer(i, crdate, letime) {
        console.log(letime)
        //获取到期时间的毫秒数
        let date = new Date(crdate);
        console.log(date)
        let time = date.getTime() + letime;

        //获取到当前时间的毫秒数
        let date1 = new Date();
        let times1 = date1.getTime();

        //获取两者的差值
        let times = time - times1;

        //将差值放入到倒计时方法中
        resetTime(times / 1000);
        console.log(times);

        //倒计数方法
        function resetTime(time) {
            var timer = null;
            var t = time;
            var d, h, m, s;
            if (times >= 0) {
                d = Math.floor(times / 1000 / 60 / 60 / 24);
                h = Math.floor(times / 1000 / 60 / 60 % 24);
                m = Math.floor(times / 1000 / 60 % 60);
                s = Math.floor(times / 1000 % 60);
            }
            function countDown() {
                s--;
                s < 10 && (s = '0' + s);
                if (s.length >= 3) {
                    s = 59;
                    m = "" + (Number(m) - 1);
                }
                if (m.length >= 3) {
                    m = '00';
                    s = '00';
                    clearInterval(timer);
                }
                if (d === 0) {
                    $("#time" + i).html("剩于时长：" + h + "小时" + m + "分" + s + "秒");
                }else
                if (h === 0) {
                    $("#time" + i).html("剩于时长：" + m + "分" + s + "秒");
                }else
                if (m === 0) {
                    $("#time" + i).html("剩于时长：" + s + "秒");
                }else {
                    $("#time" + i).html("剩于时长：" + d + "天" + h + "小时" + m + "分" + s + "秒");
                }
                if(d===0&&h===0&&m===0&&s===0){
                    location.reload();
                }
            }
            timer = setInterval(countDown, 1000);
        }
    }
</script>
</html>
